<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>500-内部服务器错误</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .error_bg {
            max-width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .error_code {
            font-size: 100px;
            color: var(--usual_description_color);
            white-space: nowrap;
            text-overflow: clip;
            overflow: hidden;
            padding-left: 5px;
            animation-duration: 2.5s;
            animation-fill-mode: backwards;
            animation-iteration-count: infinite;
        }

        .error_vertical {
            width: 5px;
            height: 120px;
            display: block;
            background-color: #444;
        }

        @keyframes error_anim {
            0% {
                width: 0%;
            }

            30% {
                width: 250px;
            }

            70% {
                width: 250px;
            }

            100% {
                width: 0%;
            }
        }

        @media (max-width:1010px) {
            .error_code{
                font-size: 70px;
            }
        }
        @media (max-width:768px) {
            .error_code{
                font-size: 35px;
                text-align: center;
                white-space: normal;
            }
        }
    </style>
</head>

<body>
    <div class="error_bg"><span class="error_code">500...</span><span class="error_vertical"></span></div>
    <script>

        if(window.innerWidth>=1010){
            errorAnim()
        }else{
            document.getElementsByClassName('error_code')[0].textContent='500：内部服务器错误'
            document.getElementsByClassName('error_vertical')[0].style.display = 'none'
        }
        function errorAnim() {
            let errorVertical = document.getElementsByClassName('error_vertical')[0]
            let errorText = document.getElementsByClassName('error_code')[0]
            errorText.style.animationName='error_anim'
            let change = true

            setInterval(function () {
                if (errorVertical.style.display == 'none') {
                    errorVertical.style.display = 'block'
                } else {
                    errorVertical.style.display = 'none'
                }
            }, 500)
            setInterval(function () {
                change = !change
                if (change) {
                    document.styleSheets[1].rules[3][1].style.width = '250px'
                    document.styleSheets[1].rules[3][2].style.width = '250px'
                    errorText.textContent = '500...'
                } else {
                    document.styleSheets[1].rules[3][1].style.width = '710px'
                    document.styleSheets[1].rules[3][2].style.width = '710px'
                    errorText.textContent = '内部服务器错误'
                }
            }, 2500)
        }
    </script>
</body>

</html>